<template>
	<view class="club">
		<SRV-topbar title="我的门店"  isLeft='true'></SRV-topbar>
		<div class="content">
			<div class="list" v-if="pageResult.list.length > 0">
				<div class="item" v-for="(item,index) in pageResult.list" :key="index" @click="jump('merchant_view', item.id)">
					<div class="left">
						<image :src="item.picture"></image>
					</div>
					<div class="right">
						<view class="right_con">
							<text class="oneline name">{{item.title}}</text>
						</view>
                        <view class="right_con">{{item.openDate}}</view>
						<view class="right_con">{{item.roleName}}</view>
						<view class="right_con right_con_disc">
                            <view v-for="(item2,index2) in item.comboList" :key="index2" >
                                <view>{{item2.title}}</view>
                                <view>{{item2.val}}</view>
                            </view>
                        </view>
					</div>
				</div>
			</div>
			<view v-if="pageResult.list.length == 0" class="nocontent">
				<image src="http://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" mode="widthFix"></image>
			</view>
		</div>
	</view>
</template>

<script>
	var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					page: 0,
					pageSize: 10,
					keywords: '',
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false,
				},
			}
		},
		methods: {
			getList() {
				_self.pageParam.page++;
				serve.request({
					url: '/member/store/index',
					data: _self.pageParam,
					v: '/v3'
				}).then(res => {
					if (res.data && res.data.length > 0) {
						_self.pageResult.list = _self.pageResult.list.concat(res.data);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0;
				});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			_self = this;
			_self.getCateList();
		},
		onShow() {
            _self.pageParam.page = 0;
            _self.pageResult.list = [];
            _self.getList();
		},
		onPullDownRefresh() {
			_self.pageParam.page = 0;
			_self.pageResult.list = [];
			_self.getList();
		},
		onReachBottom() {
			if (_self.pageResult.isEnd || _self.pageResult.isEmpty) {
				return
			}
			_self.getList()
		}
	}
</script>

<style scoped lang="scss">
	.club {
        
		.content {
			.list {
				.item {
					display: flex;
					box-sizing: border-box;
					align-items: flex-start;
					padding: 22rpx 32rpx;
					border-bottom: 1px solid #ebebeb;

					.left {
						margin-right: 15rpx;
						image {
							width: 220rpx;
							height: 180rpx;
						}
					}

					.right {
						flex: 1;
						.right_con {
							display: flex;
							align-items: center;
							position: relative;
							.name {
								// max-width: 300rpx;
								font-size: 36rpx;
							}
							.state {
								padding: 5rpx 8rpx;
								text-align: center;
								color: #FFFFFF;
								font-size: 20rpx;
								border-radius: 2rpx;
								margin-left: 10rpx;
							}
							.rate {
								color: #FFBC00;
								font-size: 20rpx;
								margin-left: 10rpx;
								margin-top: -9rpx;
							}

							.km {
								color: #999999;
								position: absolute;
								right: 0rpx;
								font-size: 20rpx;
							}

							.discounts {
								font-size: 20rpx;
								color: #EB5938;
								margin-left: 7rpx;
							}
						}
						.right_con_disc{
							    overflow: hidden;
							    word-break: break-all;
							    text-overflow: ellipsis;
							    display: -webkit-box;
							    -webkit-box-orient: vertical;
							    -webkit-line-clamp: 3;
							    font-size: 28rpx;
							    white-space: break-spaces;
							    // height: 116rpx;
						}

						.right_con:nth-child(2) {
							padding: 6rpx 0rpx;
						}
					}
				}
			}
		}
		.nocontent{
			width: 100%;
			padding-top: 338rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220rpx;
				height:220rpx;
			}
			text{
				font-size:28rpx;
				color:rgba(204,204,204,1);
			     margin-top: 30rpx;
			}
		}
		
	}
</style>
